<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="description" content="Alarm API Tutorial" />

	<title>Alarm</title>
	<script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
	<script src="./js/config.js"></script>
	<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
	<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js" data-framework-viewport-scale="false"></script>
	<script type="text/javascript" src="./js/main.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>

<body>
	<div data-role="page" id="main">
		<div data-role="header" data-position="fixed">
			<h1>Alarm</h1>
		</div>

		<div data-role="content">
			<ul data-role="listview" id="alarm-all-list">
			</ul>
		</div>

		<div data-role="footer" data-position="fixed">
			<div data-role="controlbar" data-style="toolbar">
				<ul>
					<li><a href="#absolute-alarm-add">Absolute</a></li>
					<li><a href="#relative-alarm-add">Relative</a></li>
					<li><a id="alarm-remove-all">Delete all</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div data-role="page" id="absolute-alarm-add">
		<div data-role="header" data-position="fixed">
			<h1>Absolute Alarm Add</h1>
		</div>

		<div data-role="content">
			<ul data-role="listview">
				<li data-role="list-divider">Time</li>
				<li>
					<input type="datetime" name="alarm-time" id="alarm-time"/>
				</li>
				<li data-role="list-divider">Repeat interval (sec)</li>
				<li>
					<input id="absolute-alarm-period" name="absolute-alarm-period"
					data-popupenabled="false" type="range" value="50" min="0" max="99"/>
				</li>
				<li data-role="list-divider">Action on alarm expiration</li>
				<li class="ui-li-has-radio">
					<input type="radio" name="launch-choice-absolute" id="launch-app-absolute" value="app" checked="checked"/>
					Application launch
				</li>
				<li class="ui-li-has-radio">
					<input type="radio" name="launch-choice-absolute" id="launch-svc-absolute" value="svc"/>
					Appservice launch
				</li>
			</ul>
		</div>

		<div data-role="footer" data-position="fixed">
			<div data-role="controlbar" data-style="toolbar">
				<ul>
					<li><a id="absolute-alarm-save">Save</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div data-role="page" id="relative-alarm-add">
		<div data-role="header" data-position="fixed">
			<h1>Relative Alarm Add</h1>
		</div>

		<div data-role="content">
			<ul data-role="listview">
				<li data-role="list-divider">Delay (sec)</li>
				<li>
					<input id="relative-alarm-delay" name="relative-alarm-delay"
					data-popupenabled="false" type="range" value="50" min="0" max="99"/>
				</li>
				<li data-role="list-divider">Repeat interval (sec)</li>
				<li>
					<input id="relative-alarm-period" name="relative-alarm-period"
					data-popupenabled="false" type="range" value="50" min="0" max="99"/>
				</li>
				<li data-role="list-divider">Action on alarm expiration</li>
				<li class="ui-li-has-radio">
					<input type="radio" name="launch-choice-relative" id="launch-app-relative" value="app" checked="checked"/>
					Application launch
				</li>
				<li class="ui-li-has-radio">
					<input type="radio" name="launch-choice-relative" id="launch-svc-relative" value="svc"/>
					Appservice launch
			</ul>
		</div>

		<div data-role="footer" data-position="fixed">
			<div data-role="controlbar" data-style="toolbar">
				<ul>
					<li><a id="relative-alarm-save">Save</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>
